<script setup>
import { reactive } from 'vue'
import request from '@/utils/request'

const { proxy } = getCurrentInstance()

const emit = defineEmits(['close', 'submit'])
// function(options, rows, data, pageData, pageIndex) {
//   return `<tr>
//     <td colspan="2" style="text-align: center;">整单合计：（大写）</td>
//     <td colspan="4" style="text-align: center;"></td>
//      <td colspan="3" style="text-align: center;"></td>
//   </tr>`;
// }
const props = defineProps({
  // 控制弹窗
  isShow: {
    type: Boolean,
    default: false
  },
  // 后端所需id
  id: {
    type: String || Number,
    default: ''
  },
  //   接口地址
  url: {
    type: String,
    default: ''
  },

  ischu: {
    type: Boolean,
    default: false
  }
})
// 表单
const ruleForm = reactive({
  ids: '', // id
  jobNumber: '' // 输入框
})

// 接口返回信息i
const returnForm = reactive({
  loading: false,
  placeholder: '请输入工号', // 站位提示
  message: '', // 提示内容
  quantityIdentification: '', // 计划量/实际量
  outHandoverActual: '' // 出库数量/交接数量
})

// 提交
const submit = async () => {
  if (!props.id) return proxy.errorMsg('请传入id!!!')
  if (!props.url) return proxy.errorMsg('请传入接口url!!!')
  ruleForm.ids = props.id
  try {
    proxy.$modal.loading('请稍候...')
    await request({
      url: '/storage' + props.url,
      method: 'POST',
      data: ruleForm
    })
    // 响应信息
    ruleForm.jobNumber = ''
    emit('submit')
  } catch (err) {
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 关闭弹窗
const close = () => {
  for (let Key in returnForm) {
    returnForm[Key] = ''
  }
  for (let Key in ruleForm) {
    ruleForm[Key] = ''
  }
  emit('close')
}

watch(
  () => props.isShow,
  val => {
    for (let Key in returnForm) {
      returnForm[Key] = ''
    }
    for (let Key in ruleForm) {
      ruleForm[Key] = ''
    }
    returnForm.placeholder = '请输入工号'
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<template>
  <div class="app-container">
    <p-XiaoheDialog :dialogVisible="props.isShow" title="交接" @close="close" width="20%">
      <template #body>
        <el-form label-width="120px" status-icon @submit.native.prevent inline>
          <el-form-item label="工号">
            <el-input v-model="ruleForm.jobNumber" @keyup.enter="submit" :placeholder="returnForm.placeholder" />
          </el-form-item>
        </el-form>
        <!-- <div style="width: 100%; margin-top: 10px">
          <div class="flex-between">
            <span>
              <span>{{ props.ischu ? '出库' : '入库' }}</span> /交接数量：{{
                returnForm.quantityIdentification || 0
              }}</span
            >
            <span>
              <span>{{ props.ischu ? '入库' : '出库' }}</span> /交接数量{{ returnForm.outHandoverActual || 0 }}</span
            >
          </div>
          <div class="textarea" v-html="returnForm.message"></div>
          <div class="footer_btn">
            <div class="b"></div>
          </div>
        </div> -->
      </template>
    </p-XiaoheDialog>
  </div>
</template>
<style lang="scss" scoped>
.footer_btn {
  margin-top: 20px;
  width: 100%;
}
.b {
  float: right;
}

.app-container ::v-deep .el-textarea__inner {
  height: 150px !important;
}
.flex-between {
  width: 300px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.textarea {
  height: 150px;
  border: 1px solid #dbdbdb;
  overflow: auto;
}
</style>
